<template>
	<div class="watersDataList" v-loading="watersDataListLoading">
		<div class="title">企业信息</div>
    <div class="searchBox">
      <el-form ref="form" :model="searchForm" size="mini" inline>
        <el-form-item label="企业名称">
          <el-input v-model="searchForm.pollutantName" :clearable="true" placeholder="请输入企业名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="greenBtn" size="mini" @click="onSubmit({pageSize: pageSize, pageNum: 1})">确定</el-button>
          <el-button type="primary" class="greenBtn" size="mini" @click="supplementDialog = !supplementDialog">补录企业</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox">
      <el-table :data="pollutionListData.data" border
        style="width: 100%" :header-cell-style="{color: '#666'}"
      >
        <el-table-column
          prop="pollutantName"
          label="企业名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="pollutantNumbering"
          label="企业编号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="numWater"
          label="污水排放量 t/d"
          align="center">
        </el-table-column>
        <el-table-column
          prop="rateWater"
          label="污水排放频次"
          align="center">
        </el-table-column>
        <el-table-column
          prop="sourceType"
          label="污染行业类型"
          align="center">
        </el-table-column>
        <el-table-column
          prop="personName"
          label="负责人"
          align="center">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系方式"
          align="center">
        </el-table-column>
        <el-table-column
          prop="enteringPerson"
          label="录入人"
          align="center">
        </el-table-column>
        <el-table-column
          label="详情"
          align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="openDetailDialog(scope.row.pollutantNumbering)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <myPaging :func="pageUpdate" :total="pollutionListData.total"></myPaging>

    <el-dialog title="详情" width="70%" :visible.sync="detailDialog" append-to-body>
      <el-table :data="curDetail">
        <el-table-column property="stationName" label="水站名称"></el-table-column>
        <el-table-column property="stationNumbering" label="水站编号"></el-table-column>
        <el-table-column property="stationAddress" label="水站地址"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="补录企业" width="50%" :visible.sync="supplementDialog" append-to-body>
      <el-form :model="supplementForm" :rules="supplementRules" ref="supplementForm" size="mini" label-width="100px">
        <span class="supplementTips">填写需要补录的企业编号和名称</span>
        <el-form-item label="编号" prop="id">
          <el-input v-model="supplementForm.id"></el-input>
        </el-form-item>
        <el-form-item label="企业名称" prop="name">
          <el-input v-model="supplementForm.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="greenBtn" @click="supplementSubmit">下一步</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

	</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import myPaging from '@/components/myPaging.vue'
export default {
  name: 'watersDataList',
  data () {
    return {
      msg: 'hello watersDataList!',
      watersDataListLoading: false,
      detailDialog: false,
      searchForm: {
        pollutantName: '',
      },
      curDetail: [],
      supplementDialog: false,
      supplementForm: {
        id: '',
        name: '',
      },
      supplementRules: {
        id: [
          { required: true, message: '请输入企业编号', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入企业名称', trigger: 'blur' },
        ],
      }
		}
  },
	methods: {
    ...mapActions([
      'fetchWaterPollutionList'
    ]),
    async onSubmit(pageOption = {pageSize: this.pageSize, pageNum: 1}) {
      this.watersDataListLoading = true
      await this.fetchWaterPollutionList({...this.searchForm, ...pageOption})
      this.watersDataListLoading = false
    },
    pageUpdate(option) {
      this.onSubmit(option)
    },
    openDetailDialog(pollutantNumbering) {
      let curData = this.pollutionListData.data.find(v => v.pollutantNumbering === pollutantNumbering)
      this.curDetail = curData.waterStation
      this.detailDialog = true
    },
    supplementSubmit() {
      this.$refs['supplementForm'].validate(async (valid) => {
        if(valid) {
          let supplementForm = this.supplementForm
          this.$router.push({path: '/waters/dataInput', query: {id: supplementForm.id, name: supplementForm.name}})
        }else {
          return false;
        }
      })
    }
  },
  created() {
    this.onSubmit()
  },
  computed: {
    ...mapGetters({
      pollutionListData: 'getPollutionListData',

      //分页依赖
      pageSize: 'getPageSize',
    })
  },
  components: {
    myPaging
  }
}
</script>
<style scoped>
.watersDataList {
  background: #fff;
  padding: 0 20px 35px 20px;
}
.watersDataList .title {
  position: relative;
  left: 15px;
  line-height: 70px;
  font-size: 16px;
}
.watersDataList .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.searchBox {
  background: #fff;
  margin-bottom: 15px;
}
.searchBox .line {
  text-align: center;
}
.supplementTips {
  display: inline-block;
  font-size: 12px;
  margin-left: 100px;
  margin-bottom: 15px;
  color: #868686;
}

</style>
